<template>
  <view class="licensePlate">
    <view class="keyBoard">
      <view class="top-part">
        <view class="font30 fontgrey" @tap="closeKeyBoard">取消</view>
        <view class="font30 fontblue" @tap="closeKeyBoard">确定</view>
      </view>
      <!-- 省份键盘 v-for="(item, index) in tableData"-->
      <view class="middle-part" v-if="currentFocus==0">
        <view class="flxr">
          <view :key="index" v-for="(item, index) in firstRow" class="key-class" :data-name="item" @tap="inpuProvince">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in secondRow" class="key-class" :data-name="item" @tap="inpuProvince">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in thirdRow" class="key-class" :data-name="item" @tap="inpuProvince">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in fourthRow" class="key-class" :data-name="item" @tap="inpuProvince">{{item}}</view>
          <view class="key-class flxc aic jcc" @click.stop="backSpace">
            <image src="https://mm.wentsoft.com/images/delete.png" class="backspace"></image>
          </view>
        </view>
      </view>
      <!-- 市区键盘 -->
      <view class="middle-part flxc aic" v-if="currentFocus==1">
        <view class="flxr">
          <view :key="index" v-for="(item, index) in firstRow" class="key-class2" :data-name="item">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in secondRow" :class="item=='领'?'key-class2':'key-class'" :data-name="item" @click.stop="inputCity">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in thirdRow" :class="item=='警'?'key-class2':'key-class'" :data-name="item" @click.stop="inputCity">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in fourthRow" :class="item=='港'||item=='澳'?'key-class2':'key-class'" :data-name="item" @click.stop="inputCity">{{item}}</view>
          <view class="key-class flxc aic jcc" @click.stop="backSpace">
            <image src="https://mm.wentsoft.com/images/delete.png" class="backspace"></image>
          </view>
        </view>
      </view>
      <!-- 车牌键盘 -->
      <view class="middle-part flxc aic" v-if="currentFocus>=2&&currentFocus<=5">
        <view class="flxr">
          <view :key="index" v-for="(item, index) in firstRow" @click.stop="inputLicense" class="key-class" :data-name="item">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in secondRow" :class="item=='领'||(item=='O'&&currentFocus==5)?'key-class2':'key-class'" :data-name="item" @click.stop="inputLicense">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in thirdRow" :class="item=='警'?'key-class2':'key-class'" :data-name="item" @click.stop="inputLicense">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in fourthRow" :class="item=='港'||item=='澳'?'key-class2':'key-class'" :data-name="item" @click.stop="inputLicense">{{item}}</view>
          <view class="key-class flxc aic jcc" @click.stop="backSpace">
            <image src="https://mm.wentsoft.com/images/delete.png" class="backspace"></image>
          </view>
        </view>
      </view>
      <!-- 车牌键盘 -->
      <view class="middle-part flxc aic" v-if="currentFocus>5">
        <view class="flxr">
          <view :key="index" v-for="(item, index) in firstRow" @click.stop="inputLicense" class="key-class" :data-name="item">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in secondRow" class="key-class" :data-name="item" @click.stop="inputLicense">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in thirdRow" class="key-class" :data-name="item" @click.stop="inputLicense">{{item}}</view>
        </view>
        <view class="flxr mt10">
          <view :key="index" v-for="(item, index) in fourthRow" class="key-class" :data-name="item" @click.stop="inputLicense">{{item}}</view>
          <view class="key-class flxc aic jcc" @click.stop="backSpace">
            <image src="https://mm.wentsoft.com/images/delete.png" class="backspace"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
  },
  data() {
    return {
      firstRow: [],
      secondRow: [],
      thirdRow: [],
      fourthRow: [],
      currentFocus: 0,
      tabIndex: '0' //0-蓝牌，1-新能源
    }
  },
  created() {
  },

  methods: {
    // 输入省份
    inpuProvince(e) {
      var first = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
      var second = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '领'];
      var third = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警'];
      var fourth = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
      this.$emit('inputProvince', e.currentTarget.dataset.name)
      this.currentFocus = 1
      this.firstRow = first
      this.secondRow = second
      this.thirdRow = third
      this.fourthRow = fourth
    },
    /**
     * 打开键盘
     * @param {*} e 当前输入位
     * @param {*} tab 
     */
    loadkeyboard(e, tab) {
      if (e == 0) {
        this.currentFocus = 0
        this.firstRow = ['京', '津', '晋', '冀', '蒙', '辽', '黑', '吉', '沪', '苏']
        this.secondRow = ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂']
        this.thirdRow = ['琼', '川', '贵', '云', '藏', '渝', '陕', '甘', '青', '宁']
        this.fourthRow = ['新', '使', '港', '澳', '台', '学', '虚', 'W']
      } else if (e != 0 && e <= 5) {
        this.currentFocus = e
        this.firstRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
        this.secondRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '领']
        this.thirdRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警']
        this.fourthRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
      } else {
        this.currentFocus = e
        this.firstRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
        this.secondRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '领']
        this.thirdRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警']
        this.fourthRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
      }
      this.tabIndex = tab
    },

    // 输入市
    inputCity(e) {
      if (e.currentTarget.dataset.name == '领' ||
        e.currentTarget.dataset.name == '警' ||
        e.currentTarget.dataset.name == '港' ||
        e.currentTarget.dataset.name == '澳') {
        return;
      }
      var first = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
      var second = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '领'];
      var third = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警'];
      var fourth = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']

      this.$emit('inputCity', e.currentTarget.dataset.name)
      this.currentFocus = 2
      this.firstRow = first
      this.secondRow = second
      this.thirdRow = third
      this.fourthRow = fourth
    },

    // 输入车牌
    inputLicense(e) {
      if (this.currentFocus >= 2 && this.currentFocus <= 5) {
        if (e.currentTarget.dataset.name == '领' ||
          e.currentTarget.dataset.name == '警' ||
          e.currentTarget.dataset.name == '港' ||
          e.currentTarget.dataset.name == '澳') {
          return;
        }
      }
      if (this.currentFocus == 5 && e.currentTarget.dataset.name == 'O') {
        return;
      }

      if (this.currentFocus != 0 && this.currentFocus < 5) {
        this.firstRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
        this.secondRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '领']
        this.thirdRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警']
        this.fourthRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
      } else {
        this.firstRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
        this.secondRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '领']
        this.thirdRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警']
        this.fourthRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
      }


      this.$emit('inputLicense', e.currentTarget.dataset.name)
      this.currentFocus = this.currentFocus + 1
    },

    backSpace() {
      if (this.currentFocus > 2) {
        if (this.currentFocus > 6) {
          this.firstRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
          this.secondRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '领']
          this.thirdRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警']
          this.fourthRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
        } else {
          this.firstRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
          this.secondRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '领']
          this.thirdRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警']
          this.fourthRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
        }
        this.currentFocus = this.currentFocus - 1
        this.$emit('backspace', this.currentFocus)
      } else if (this.currentFocus == 2) {
        this.currentFocus = this.currentFocus - 1
        this.$emit('backspace', this.currentFocus)
      } else if (this.currentFocus == 1) {
        this.currentFocus = this.currentFocus - 1
        this.firstRow = ['京', '津', '晋', '冀', '蒙', '辽', '黑', '吉', '沪', '苏']
        this.secondRow = ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂']
        this.thirdRow = ['琼', '川', '贵', '云', '藏', '渝', '陕', '甘', '青', '宁']
        this.fourthRow = ['新', '使', '港', '澳', '台', '学', '虚', 'W']
        this.$emit('backspace', this.currentFocus)
      } else {
        return;
      }
    },

    closeKeyBoard() {
      this.$emit('closeKeyBoard')
    }
  }
}
</script> 

<style lang="scss" scoped>
.keyBoard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 616rpx;
  background: #e1e3e7;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.top-part {
  display: flex;
  justify-content: space-between;
  height: 82rpx;
  padding: 0 24rpx;
}
.middle-part {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 430rpx;
  padding: 0 10rpx 26rpx 10rpx;
}
.flxr {
  display: flex;
  justify-content: center;
}
.mt10 {
  margin-top: 10rpx;
}
.friendlyAlert {
  height: 100%;
  width: 100%;
  position: absolute;
}
.font30 {
  font-size: 30rpx;
}
.font36 {
  font-size: 36rpx;
}
.fontblue {
  color: #3485f4;
}
.fontgrey {
  color: #91959c;
}
.key-class {
  height: 90rpx;
  width: 66rpx;
  border-radius: 8rpx;
  font-size: 36rpx;
  color: #333;
  line-height: 90rpx;
  text-align: center;
  box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.16);
  background: #fff;
  margin-right: 8rpx;
}

.key-class2 {
  height: 90rpx;
  width: 66rpx;
  border-radius: 8rpx;
  font-size: 36rpx;
  color: #cacaca;
  line-height: 90rpx;
  text-align: center;
  box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.16);
  background: #fff;
  margin-right: 8rpx;
}
.backspace {
  height: 59rpx;
  width: 53rpx;
  padding-top: 17rpx;
}
</style>
